<template>
  <div class="publish-container">
    <TempPage>
      <template #main-left>
        <div class="main-left">
          <!-- 头部 -->
          <section class="main-left-header">
            <h1 class="main-left-title">发布文章</h1>
          </section>
          <!-- 编辑文章 -->
          <section class="main-left-main">
            <el-form ref="form" :model="articleInfo" label-width="80px" :label-position="labelPosition" size="small">
              <el-form-item label="文章标题">
                <el-input v-model="articleInfo.title"></el-input>
              </el-form-item>
              <el-form-item label="文章作者">
                <el-input v-model="articleInfo.author" disabled></el-input>
              </el-form-item>
              <el-form-item label="文章标签">
                <el-checkbox-group v-model="articleInfo.tag">
                  <el-checkbox :label="item" name="type" v-for="(item, index) in tags" :key="index">{{ item.tag_name }}</el-checkbox>
                  <el-button type="primary" icon="el-icon-plus" circle size="mini" class="add_tag" @click="insertTags"></el-button>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="文章内容">
                <el-input type="textarea" v-model="articleInfo.content" rows="12"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="insertArticle">发布</el-button>
                <el-button @click="resetForm" plain>重置</el-button>
              </el-form-item>
            </el-form>
          </section>
          <!-- 分割线 -->
          <el-divider></el-divider>
          <!-- 文章实时展示 -->
          <section class="main-left-footer">
            <h2 class="main-left-title">文章总览</h2>
            <el-descriptions title="" direction="vertical" :column="1" border>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-c-scale-to-original"></i>
                  文章标题
                </template>
                {{ articleInfo.title }}</el-descriptions-item
              >
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  文章作者
                </template>
                {{ articleInfo.author }}</el-descriptions-item
              >
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-collection-tag"></i>
                  文章标签
                </template>
                <el-tag size="small" v-for="(item, index) in articleInfo.tag" :key="index" :span="2">{{ item.tag_name }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-document"></i>
                  文章内容
                </template>
                {{ articleInfo.content }}</el-descriptions-item
              >
            </el-descriptions>
          </section>
        </div>
      </template>
      <!-- 侧边栏插槽 -->
      <template #aside>
        <div>
          <!-- 用户模块 -->
          <Aside class="login-module">
            <template #header>
              <div></div>
            </template>
            <template #main>
              <div>
                <keep-alive>
                  <component :is="comName" :newUserInfo="userInfo" @logoutInfo="getLogoutInfo" @shareNewInfo="getNewInfo"></component>
                </keep-alive>
              </div>
            </template>
            <template #footer>
              <div></div>
            </template>
          </Aside>
        </div>
      </template>
    </TempPage>
  </div>
</template>

<script>
import TempPage from '@/components/TempPage'
import Aside from '@/components/Aside'
import Tabs from '@/components/Tabs'
import UserModule from '@/components/UserModule'

export default {
  name: 'Publish',
  data () {
    return {
      labelPosition: 'top',
      userInfo: {},
      comName: 'UserModule',
      articleInfo: {
        // cover: '',
        title: '',
        author: '',
        tag: [],
        content: ''
      },
      tags: []
    }
  },
  methods: {
    async initUserInfo () {
      // const username = localStorage.getItem('username')
      const _id = localStorage.getItem('_id')
      const res = await this.$api.queryOne({ _id })
      console.log(res)
      this.userInfo = res.data.data
      this.articleInfo.author = this.userInfo.username
    },
    // 发布文章
    async insertArticle () {
      const res = await this.$api.insertArticle({
        title: this.articleInfo.title,
        author: this.articleInfo.author,
        tag: JSON.stringify(this.articleInfo.tag),
        content: this.articleInfo.content
      })
      // console.log(res)
      if (res.data.err_code === 0) {
        this.$notify({
          title: '成功',
          message: res.data.message,
          type: 'success'
        })
        this.$router.push('/blog/myspace')
      }
    },
    // 查询标签
    async getAllTag () {
      const res = await this.$api.getAllTags()
      this.tags = res.data.data.tags
      console.log(res)
    },
    // 插入标签
    insertTags () {
      this.$prompt('请输入新的标签', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async ({ value }) => {
          const res = await this.$api.insertTag({ value })
          console.log(res)
          if (res.data.err_code === 0) {
            this.$notify({
              title: '成功',
              type: 'success',
              message: res.data.message
            })
            this.tags = res.data.data
          }
        })
        .catch(() => {
          this.$notify.info({
            title: '消息',
            message: '取消输入'
          })
        })
    },
    getNewInfo (val) {
      setTimeout(() => {
        this.comName = val.comName
      }, 100)
      this.newUserInfo = val.userInfo
    },
    getLogoutInfo (val) {
      // console.log(val)
      setTimeout(() => {
        this.comName = val
      }, 100)
    },
    // 重置
    resetForm () {
      this.articleInfo.title = ''
      this.articleInfo.tag = []
      this.articleInfo.content = ''
    }
  },
  created () {
    this.getAllTag()
    this.initUserInfo()
  },
  components: {
    TempPage,
    Aside,
    Tabs,
    UserModule
  }
}
</script>

<style lang="less" scoped>
html,
body {
  width: 100%;
  // height: 100%;
}
.publish-container {
  width: 100%;
  // height: 100%;
  background-image: -moz-linear-gradient(45deg, rgb(209, 173, 255), rgb(184, 255, 238));
  background-image: -webkit-linear-gradient(45deg, rgb(209, 173, 255), rgb(184, 255, 238));
  background-image: linear-gradient(45deg, rgb(209, 173, 255), rgb(184, 255, 238));
}
.main-left {
  // margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 50px 40px;
}
.main-left-title {
  text-align: center;
  font-size: 20px;
  margin-bottom: 30px;
}
// .main-left-main,
// .main-left-footer {

// }
// .main-left-items {
//   margin-top: 30px;
// }
.login-module {
  display: flex;
  flex-direction: column;
  padding: 20px 15px;
  margin-bottom: 15px;
}
/deep/ .el-tabs--left .el-tabs__header.is-left {
  margin-right: 30px;
}
.add_tag {
  margin-left: 15px;
}
</style>
